<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>报名系统</title>
    <style>
        *{margin: 0;padding: 0;}
        tr{
            text-align: center;
        }
        p{color: #f00;}
        th{
            width: 50px;
        }
        tr td:nth-child(4){
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="form">
        <div>
            <span>姓名：</span>
            <input type="text" name="" id="name">
        </div><br>
        <div>
            <span>年龄：</span>
            <input type="num" name="" id="age">
        </div><br>
        <div>
            <span>性别：</span>
            <input type="text" name="" id="sex">
        </div>
        <button class="btn">添加</button>
    </div><br>
    <table border="1" cellspacing='0'>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>操作</th>
        </tr>
    </table>
    <script>
        let name = document.getElementById('name')
        let age = document.getElementById('age')
        let sex = document.getElementById('sex')
        let btn = document.querySelector('.btn')
        let table = document.querySelector('table')

        name.addEventListener('blur',function(){
            if(!this.value){
                if(this.nextElementSibling){
                    return
                }
                let p = document.createElement('p')
                p.textContent = '111'
                console.log(this);
                this.parentNode.appendChild(p)
                btn.disable=false
            }else{
                this.nextElementSibling.remove()
            }
        })
        
        btn.onclick=()=>{
            table.innerHTML += 
            `
            <tr>
            <td>${name.value}</td>
            <td>${age.value}</td>
            <td>${sex.value}</td>
            <td class='del''>删除</td>
            </tr>
            `
        }
        table.onclick=(e)=>{
            e.target.className === 'del' ? e.target.parentNode.remove() : null
        }
        
    </script>
</body>
</html>